import React from 'react'
import { inject, observer } from 'mobx-react';
import { List, Radio,Tools } from 'weaver-mobile'
import { toJS } from 'mobx'
import './style/radio.less'
import { ListPage } from 'weaver-mobile-page'
import * as _ from 'lodash'
const getLabel = Tools.getLabel;

const RadioItem = Radio.RadioItem;
const Brief = RadioItem.Brief;

const template = {
    default: {
        theme: 'col1_row2',
        dataKeys: ['nodename', 'operator'],
    },
};

const template1 = {
    default: [
        {
            key: 'col1',
            configs: [
                {
                    key: 'col1_row1',
                    configs: [
                        { key: 'showname', highlight: true },
                    ],
                },
            ],
        },
    ],
};


@inject("wfRejectChooseStore")
@observer
export default class RadioList extends React.Component {
    componentDidMount() {
        this.setList(this.props);
    }
    componentWillReceiveProps(nextProps) {
        this.setList(nextProps);
    }
    changeNameArrToString(arr) {
        let str = '';
        if (arr.length > 0) {
            arr.map(item => {
                str += item.name + ' , '
            })
        }
        str = str.substring(0, str.length - 3);
        return str;
    }
    setListType12(storeList, list, operator) {
        let data = [];
        if (list.length > 0) {
            list.map(item => {
                for (let k in operator) {
                    if (k === toJS(item.key)) {
                        data.push({ "nodename": item.nodename, "operator": this.changeNameArrToString(toJS(operator[k])), "id": k });
                    }
                }
            })
        }
        storeList.setState({ data })
    }
    setList(prop) {
        const { wfRejectChooseStore, datas = {} } = prop;
        const { allData } = wfRejectChooseStore;
        const { rejectList, remindList, submitList } = allData;
        const { rejectNodeList = [], rejectNodeOperators = {}, remindNodeList = [], remindNodeOperators = {}, submitDirectNodeOptions = [] } = datas;
        const data = [];
        this.setListType12(rejectList, rejectNodeList, rejectNodeOperators);
        this.setListType12(remindList, remindNodeList, remindNodeOperators);
        if (submitDirectNodeOptions.length > 0) {
            submitDirectNodeOptions.map(item => {
                data.push({ "showname": item.showname, "id": item.key });
            })
        }
        submitList.setState({ data })
    }

    // 选中事件
    onSelect = (keys, titletype) => {
        const { wfRejectChooseStore } = this.props;
        const { changeCondition } = wfRejectChooseStore;
        let str = keys.join(",")
        // 根据点击的列表类型不同，修改store中不同类型的选中对象
        if (titletype === 0) {
            // 单选
            changeCondition("rejectNodeKey", str)
        } else if (titletype === 1) {
            // 多选
            changeCondition("remindNodeid", str)
        } else if (titletype === 2) {
            // 单选
            changeCondition("isSubmitDirect", str)
        }
    }

    //操作者有多个时，拼接成字符串
    getOperator = (key) => {
        const { operators } = this.props;
        let str = "";
        for (let k in operators) {
            if (key === k) {
                operators[k].map(item => {
                    str += item.name + ",";
                })
            }
        }
        str = str.substring(0, str.length - 1)
        return str;
    }
    //获取显示列表
    getListDom = (titletype) => {
        const { wfRejectChooseStore } = this.props;
        const { allData } = wfRejectChooseStore;
        const { rejectList, remindList, submitList } = allData;
        const mytitle = [getLabel(500529, "请选择退回节点"), getLabel(24465, "提醒节点"), getLabel(384066,"退回后再提交的处理方式")];
        if (titletype === 0) {
            return (
                toJS(rejectList.data).length > 0 && <List renderHeader={() => mytitle[titletype]}>
                    <ListPage.Normal
                        showCheck
                        template={template}
                        multipleCheck={false}
                        store={rejectList}
                        onRowSelect={(...arg) => {
                            this.onSelect(toJS(...arg), titletype)
                        }}
                        onRowClick={(obj,index)=>{
                            let now_id = toJS(obj).id;
                            rejectList.setState({selectedRowKeys:[now_id]})
                            this.onSelect([now_id], titletype) 
                        }}
                    />
                </List>
            )
        } else if (titletype === 1) {
            return (
                toJS(remindList).data.length > 0 && <List renderHeader={() => mytitle[titletype]}>
                    <ListPage.Normal
                        showCheck
                        template={template}
                        store={remindList}
                        multipleCheck={true}
                        onRowSelect={(...arg) => {
                            this.onSelect(toJS(...arg), titletype)
                        }}
                        onRowClick={(obj,index)=>{
                            let selectedRowKeys = toJS(remindList.selectedRowKeys);
                            let now_id = toJS(obj).id;
                            if(selectedRowKeys.includes(now_id)){
                                selectedRowKeys=  _.difference(selectedRowKeys, [now_id]);
                            }else{
                                selectedRowKeys.push(now_id);
                            }
                            remindList.setState({selectedRowKeys:selectedRowKeys})
                            this.onSelect(selectedRowKeys, titletype) 
                        }}
                    />
                </List>
            )
        } else if (titletype === 2) {
            return (
                toJS(submitList).data.length > 0 &&
                <List renderHeader={() => mytitle[titletype]}>
                    <ListPage.Normal
                        showCheck
                        template={template1}
                        multipleCheck={false}
                        store={submitList}
                        onRowSelect={(...arg) => {
                            this.onSelect(toJS(...arg), titletype)
                        }}
                        onRowClick={(obj,index)=>{
                            let now_id = toJS(obj).id;
                            submitList.setState({selectedRowKeys:[now_id]})
                            this.onSelect([now_id], titletype) 
                        }}
                    />
                </List>
            )
        }
    }
    render() {
        const { titletype } = this.props;
        return (this.getListDom(titletype))
    }
}


